<template>
	<h2 class="my-2 fw-bold">{{message}}</h2>
	<div class="mt-4">
		<table class="table table-striped table-hover table-light table-bordered align-middle  text-nowrap text-center ">
			<thead>
				<tr class="table-dark">
					<th>商品编号</th>
					<th>商品名称</th>
					<th>商品图片</th>
					<th>商品规格</th>
					<th>商品价格</th>
					<th>商家时间</th>
					<th>修改</th>
					<th>删除</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="item in goodsList">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>
						<img :src=" APIDomainName + item.pic" height="80">
					</td>
					<td>{{item.spec}}</td>
					<td>￥{{item.price}}</td>
					<td>{{dateFormat(item.shelf_time)}}</td>
					<td><button type="button" class="btn btn-red btn-sm" @click="onEdit(item)"> 修改</button></td>
					<td><button class="btn btn-secondary btn-sm" @click="onDelete(item)"> 删除</button></td>
				</tr>
			</tbody>
		</table>
	</div>
	
	<van-pagination v-model="pageIndex" :total-items="recordTotal" :show-page-size="pageSize" force-ellipses
		@change="pageChanged" />
		
</template>

<script setup>
	import * as dayjs from 'dayjs'
	import {
		ref
	} from "vue"
	const message = ref("商品管理")
	const goodsList = ref([])
	const dataLoaded = ref(false)
	const APIDomainName = import.meta.env.VITE_APIDomainName;
	const pageIndex = ref(1)
	const pageSize = ref(6)
	const recordTotal = ref(0)
	// 导入接口
	import {
		getProductListAPI
	} from "@/api/product.js"
	const loadData = () => {
		// 调用接口
		let params = {
			pageIndex: pageIndex.value,
			pageSize: pageSize.value,
		}
		getProductListAPI(params).then(result => {
			// console.log(result)
			goodsList.value = result.data;
			recordTotal.value = result.recordTotal;
			dataLoaded.value = true;
		}).catch(error => {
			console.log(error)
		})
	}
	loadData()

	const pageChanged = () => {
		loadData()
	}
	
	const onEdit = (item)=>{
		console.log("修改的商品：",item)
	}
	
	const onDelete = (item)=>{
		console.log("删除的商品：",item)
	}
	
	const dateFormat = (d)=>{
		return dayjs(d).format('YYYY-MM-DD HH:mm:ss')
	}
</script>

<style>
</style>